<template>
  <div>
    <el-dialog
      title="发票编辑"
      v-bind="$attrs"
      v-on="$listeners"
      append-to-body
      @close="cancle"
    >
      <div class="roder-content">
        <div class="roder-content1">
          <div class="roder-content2">
            <div class="info">邮寄信息</div>
            <div class="content">
              <div>
                <span>收票人</span>
                <span>
                  <el-input
                    v-model="form.consignee"
                    :readonly="isadministrator"
                    clearable
                  ></el-input>
                </span>
              </div>
              <div>
                <span>联系电话</span>
                <span>
                  <el-input
                    v-model="form.consigneephone"
                    :readonly="isadministrator"
                    clearable
                  ></el-input>
                </span>
              </div>
              <div>
                <span>详细地址</span>
                <span>
                  <el-input
                    v-model="form.consigneeaddress"
                    :readonly="isadministrator"
                    clearable
                  ></el-input>
                </span>
              </div>
            </div>
            <div class="info">发票信息</div>
            <div class="content">
              <div class="ps">
                <span>配送方式</span>
                <span
                  style="margin-right: 30px"
                  :class="{
                    pstype,
                    pstype1:
                      form.deliverymode == 'bc38be11608d4796a1296f94bc20b7b5'
                  }"
                >
                  <div
                    class="sanjiaoxing"
                    :class="{
                      logo:
                        form.deliverymode == 'bc38be11608d4796a1296f94bc20b7b5'
                    }"
                  ></div>
                  <i class="el-icon-check"></i>
                  邮寄
                </span>
                <span
                  :class="{
                    pstype,
                    pstype1:
                      form.deliverymode == 'bdfb0e04fa4a4de6a050e452982464c5'
                  }"
                >
                  <div
                    class="sanjiaoxing"
                    :class="{
                      logo:
                        form.deliverymode == 'bdfb0e04fa4a4de6a050e452982464c5'
                    }"
                  ></div>
                  <i class="el-icon-check"></i>
                  自取
                </span>
              </div>
              <div>
                <span>
                  票据类型
                </span>
                <span style="padding-left:13px">
                  {{ form.billtype }}
                </span>
              </div>
              <div>
                <span
                  ><div class="require">*</div>
                  发票状态
                </span>
                <span>
                  <el-select v-model="form.invoicestatus">
                    <el-option
                      v-for="(item, index) in getDict('fpzt')"
                      :key="index"
                      :label="item.dataName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </span>
              </div>

              <div>
                <span
                  ><div class="require">*</div>
                  开票寄出时间</span
                >
                <span>
                  <el-date-picker
                    v-model="form.invoicingtime"
                    type="datetime"
                    placeholder="请选择寄出日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="timestamp"
                  ></el-date-picker>
                </span>
              </div>
              <div>
                <span
                  ><div class="require">*</div>
                  发票快递信息</span
                >
                <span>
                  <el-input v-model="form.invoiceinfo" clearable></el-input>
                </span>
              </div>
              <div>
                <span
                  ><div class="require">*</div>
                  发票附件</span
                >
                <span>
                  <!-- <el-input v-model="form.invoiceatta" clearable></el-input> -->
                  <div class="upload-btn" @click="uploadFile">
                    上传/查看附件
                  </div>
                </span>
              </div>
              <div>
                <span
                  ><div class="require">*</div>
                  发票内容</span
                >
                <span>
                  <el-input v-model="form.invoicecontent" clearable></el-input>
                </span>
              </div>
              <div>
                <span>发票抬头</span>
                <span>
                  <el-input
                    v-model="form.invoicetitle"
                    :readonly="isadministrator"
                    clearable
                  ></el-input>
                </span>
              </div>
              <div>
                <span>税号</span>
                <span>
                  <el-input
                    v-model="form.dutyparagraph"
                    :readonly="isadministrator"
                    clearable
                  ></el-input>
                </span>
              </div>
              <div>
                <span>单位地址</span>
                <span>
                  <el-input
                    v-model="form.unitaddress"
                    :readonly="isadministrator"
                    clearable
                  ></el-input>
                </span>
              </div>
              <div>
                <span>电话号码</span>
                <span>
                  <el-input
                    v-model="form.telephone"
                    :readonly="isadministrator"
                    clearable
                  ></el-input>
                </span>
              </div>
              <div>
                <span>开户银行</span>
                <span>
                  <el-input
                    v-model="form.bank"
                    :readonly="isadministrator"
                    clearable
                  ></el-input>
                </span>
              </div>
              <div>
                <span>银行卡号</span>
                <span>
                  <el-input
                    v-model="form.bankaccount"
                    :readonly="isadministrator"
                    clearable
                  ></el-input>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="cancle()">取消</el-button>
        <el-button type="primary" @click="confirm()" style="margin-right: 50px"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <Upload
      :visible.sync="uploadVisible"
      :fileSize="500"
      v-model="form.invoiceatta"
      :invoice="true"
    />
  </div>
</template>
<script> 
import { orderInfo, editInvioce } from "@/api/order";
export default {
  name: "www",
  data() {
    return {
      type: 0,
      id: "",
      pstype: true,
      uploadVisible: false,
      form: {
        consignee: "",
        consigneephone: "",
        consigneeaddress: "",
        deliverymode: "",
        invoicestatus: "",
        invoicingtime: "",
        invoiceinfo: "",
        invoiceatta: "",
        invoicecontent: "",
        invoicetitle: "",
        dutyparagraph: "",
        unitaddress: "",
        telephone: "",
        bank: "",
        bankaccount: "",
        billtype: ""
      },
      isadministrator: ""
    };
  },
  methods: {
    uploadFile() {
      this.uploadVisible = true;
    },
    async initData(id) {
      this.id = id;
      try {
        let { data } = await orderInfo(id,this.$store.getters.organizeId);
        // console.log(data, 22222);
        for (let key in this.form) {
          for (let key1 in data) {
            if (key == key1) {
              this.form[key] = data[key1];
            }
          }
          for (let key2 in data.studentsEntity) {
            if (key == key2) {
              this.form[key] = data.studentsEntity[key2];
            }
          }
        }
      } finally {
      }
    },
    reset() {
      this.form = {
        consignee: "",
        consigneephone: "",
        consigneeaddress: "",
        deliverymode: "",
        invoicestatus: "",
        invoicingtime: "",
        invoiceinfo: "",
        invoiceatta: "",
        invoicecontent: "",
        invoicetitle: "",
        dutyparagraph: "",
        unitaddress: "",
        telephone: "",
        bank: "",
        bankaccount: ""
      };
    },
    cancle() {
      this.reset();
      this.$emit("update:visible", false);
    },
    async confirm() {
      let data = {
        invoicestatus: "",
        invoicingtime: "",
        invoiceinfo: "",
        invoiceatta: "",
        invoicecontent: "",
        organizeId: this.$store.getters.organizeId
      };
      for (let i in data) {
        for (let j in this.form) {
          if (i == j) {
            data[i] = this.form[j];
            if (!data[i]) return this.$message.error("带 * 号为必填项");
            if (data[i] instanceof Array && !data[i].length) {
              return this.$message.error("带 * 号为必填项，请完善发票附件");
            }
          }
        }
      }
      try {
        await editInvioce(this.id, data);
        this.$message({
          message: "发票信息修改成功",
          type: "success",
          duration: 1000,
          onClose: () => {
            this.reset();
            this.$emit("update:visible", false);
            this.$emit("refresh", true);
          }
        });
      } catch {}
    }
  },
  created() {}
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: 600px;
  overflow-y: auto;
}
::v-deep .el-input {
  width: 600px;
  font-size: 16px;
  text-indent: 0;
  .el-input__inner {
    border: none;
  }
}
.upload-btn {
  cursor: pointer;
  padding-left: 15px;
  &:hover {
    color: skyblue;
  }
}
.roder-content {
  height: 61vh;
  border-radius: 20px;
  line-height: 40px;

  .info {
    background: rgb(245, 245, 245);
    border: 1px solid rgba(242, 242, 242);
    text-indent: 30px;
    font-weight: bold;
  }
  .content {
    background: #fff;
    border: 1px solid rgba(242, 242, 242);
    border-bottom: none;
    > div {
      border-bottom: 1px solid rgba(242, 242, 242);
      span {
        display: inline-block;
        font-size: 16px;
      }
      span:first-child {
        width: 25%;
        text-align: center;
        // padding-left: 50px;
        // box-sizing: border-box;
        height: 100%;
        border-right: 1px solid rgba(242, 242, 242);
      }
      span:nth-child(2) {
        text-indent: 20px;
      }
      .pstype {
        position: relative;
        // border: 3px solid rgba(153, 153, 153, 0.2);
        border: 3px solid #fff;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-indent: 0 !important;
        margin: 0 20px;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        .sanjiaoxing {
          position: absolute;
          width: 0;
          height: 0;
          bottom: 0;
          right: 0;
          border-bottom: 20px solid red;
          border-left: 20px solid transparent;
          display: none;
        }
        .logo {
          display: block;
        }
        .el-icon-check {
          bottom: 0;
          right: -1px;
          position: absolute;
          color: #fff !important;
          font-weight: 600;
        }
      }
      .pstype1 {
        color: red;
        border-color: red;
      }
    }
    .ps {
      line-height: 60px;
      display: flex;
      align-items: center;
    }
  }

  .footer {
    text-align: center;
    line-height: 75px;
  }
}
.require {
  display: inline-block;
  color: red;
}
</style>
